<template>
  <div class="tabBar">
	  <!-- 视图出口 -->
	  <router-view></router-view>
	  <!-- 底部tabbar -->
	<van-tabbar v-model="active" active-color="#f00" :route="true">
	  <van-tabbar-item  :to="{name:'homePage'}">
	    <span>首页</span>
		 <template #icon="props">
	      <img src="@/assets/tabicons/home.png" />
	    </template>
	  </van-tabbar-item>
	  
	  <!-- <van-tabbar-item  icon="records"  :to="{name:'addressPage'}" 
	  :class="{'van-tabbar-item--active':this.$route.name=='orderPage','color':this.$route.name=='orderPage'}">
	    <span>点餐</span> -->
		<van-tabbar-item  :to="{name:'orderPage'}">
		<span>点餐</span>
		<template #icon="props">
		  <img :src="props.active ? iconorderlist.active : iconorderlist.inactive"/>
		</template>
	  </van-tabbar-item>
	  
	  <van-tabbar-item  :to="{name:'orderListPage'}">
	    <span>订单</span>
	    <template #icon="props">
	      <img :src="props.active ? iconorderlist.active : iconorderlist.inactive"/>
	    </template>
	  </van-tabbar-item>
	  
	  <van-tabbar-item :to="{name:'myPage'}" >
	    <span>我的</span>
	    <template #icon="props">
	      <img :src="props.active ? iconmy.active : iconmy.inactive"/>
	    </template>
	  </van-tabbar-item>
	  
	  
	</van-tabbar>
	
  </div>
</template>
<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);


 export default{
	  name:'tabBar',
	 data(){
		 return{
			  active: 0,
			  iconorder: {
				 active:require('@/assets/tabicons/order-o.png') ,
				 inactive: require('@/assets/tabicons/order.png'),
			   },
			   iconorderlist: {
				 active:require('@/assets/tabicons/orderlist-o.png') ,
				 inactive: require('@/assets/tabicons/orderlist.png'),
			   },
			   iconmy: {
				 active:require('@/assets/tabicons/my-o.png') ,
				 inactive: require('@/assets/tabicons/my.png'),
			   },
			   
		 }
	 }
 }
</script>
<style scoped >
.van-tabbar--fixed{
	z-index: 3000;
}
	.van-tabbar-item__icon img{
		width: 20px;
		height: 20px;
	}

.color{color:red;}

</style>